<template>
	<view class="page">
		<view class="address-list">
			<view class="address-info" @tap="selectAddress(addressInfo.id)" :class="{'bottom-border': addressIndex !== addressListCount}" v-for="(addressInfo, addressIndex) of addressList" :key="addressIndex">
				<view class="name-and-phone">
					<text class="name">{{addressInfo.consignee}}</text>
					<text class="phone">{{addressInfo.mobile}}</text>
					<text class="default-tag common-tag" v-if="addressInfo.is_default">默认</text>
					<text class="custom-tag common-tag" v-if="addressInfo.tag">{{addressInfo.tag}}</text>
				</view>
				<view class="address-and-icon">
					<text class="address">{{addressInfo.address}}</text>
					<text class="edit-icon" :style="{'font-family': 'tpf-iconfont'}" @tap.stop="editIconTap(addressIndex)">&#xe624;</text>
				</view>
			</view>
		</view>
		
		<view class="add-address-btn-wrap">
			<view class="add-address-btn" @tap="addAddressBtnTap">
				<text class="plus-icon" :style="{'font-family': 'tpf-iconfont'}">&#xe608;</text>
				<text class="add-address-btn-text">新建收货地址</text>
			</view>
		</view>
	</view>
</template>

<script>
	import data from '@/data/ucenter/address/address.js';
	
	export default {
		data() {
			return {
				addressList: [],
				trigger:"",
				product_id:0
			}
		},
		async onLoad(option) {
			const addressListData = data.addressList();
			this.addressList = await addressListData;
			
			this.trigger = option.trigger || "";
			this.product_id = option.product_id || 0;
		},
		computed: {
			addressListCount() {
				return this.addressList.length - 1; 
			}
		},
		methods: {
			editIconTap(index) {
				const address = this.addressList[index];
				const addressQuerystring = `id=${address.id}&is_default=${address.is_default}&consignee=${address.consignee}&mobile=${address.mobile}&district=${address.district}&address=${address.address}&tag=${address.tag}&trigger=${this.trigger}&product_id=${this.product_id}`;
				uni.navigateTo({
					url: `/pages/ucenter/address/edit-address?type=edit&${addressQuerystring}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			addAddressBtnTap() {
				this.$Helper.tpfJump({url:`/pages/ucenter/address/edit-address?type=add&trigger=${this.trigger}&product_id=${this.product_id}`});
			},
			selectAddress(id){
				console.log(id);
				
				if(this.product_id >0 && this.trigger=="detail"){
					this.$Helper.tpfJump({url:"/pages/shop/product/product-detail?id="+this.product_id+"&address_id="+id,type:"redirectTo"});
				}
				else if(this.trigger == "settlement" || this.trigger == "direct_settlement"){
					this.$Helper.tpfJump({url:`/pages/shop/settlement/settlement?address_id=${id}&trigger=${this.trigger}`,type:"redirectTo"});
				}
				else{
					this.$Helper.tpfJump({url:`/pages/ucenter/address/address`,type:"redirectTo"});
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.page {
		background-color: $uni-bg-color;
	}
	
	.bottom-border {
		border-bottom-width: 0.5px;
		border-bottom-style: solid;
		border-bottom-color: $uni-border-color;
	}
	
	.address-list {
		
	}
	
	.address-info {
		width: 750rpx;
		/* #ifndef APP-PLUS-NVUE */
		box-sizing: border-box;
		/* #endif */
		padding-top: $uni-spacing-row-base;
		padding-bottom: $uni-spacing-row-base;
		padding-left: $uni-spacing-col-base;
		padding-right: $uni-spacing-col-base;
	}
	
	.name-and-phone {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
	.name {
		font-size: $uni-font-size-base;
		font-weight: bold;
		width: 180rpx;
	}
	.phone {
		font-size: $uni-font-size-base;
		font-weight: bold;
		margin-left: $uni-spacing-col-base;
	}
	.common-tag {
		font-size: $uni-font-size-mi;
		color: $uni-text-color-white;
		border-radius: $uni-border-radius-sm;
		padding-left: 3px;
		padding-right: 3px;
		padding-top: 1px;
		padding-bottom: 1px;
		margin-left: $uni-spacing-col-base;
	}
	.default-tag {
		background-color: $uni-bg-color-red;
	}
	.custom-tag {
		background-color: $uni-bg-color-blue;
	}
	
	.address-and-icon {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		
		margin-top: $uni-spacing-row-sm;
	}
	.address {
		font-size: $uni-font-size-sm;
	}
	.edit-icon {
		font-size: $uni-font-size-base;
	}
	
	.add-address-btn-wrap {
		position: fixed;
		bottom: $uni-spacing-row-base;
		left: 0;
		right: 0;
		
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.add-address-btn {
		
		height: 80rpx;
		width: 500rpx;
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		
		
		background-color: $uni-bg-color-red;
		border-radius: 100000px;
	}
	.plus-icon {
		// border-width: 1px;
		font-size: $uni-font-size-sm;
		font-weight: bold;
		color: $uni-text-color-white;
	}
	.add-address-btn-text {
		// border-width: 1px;
		margin-left: $uni-spacing-col-base;
		font-size: $uni-font-size-base;
		color: $uni-text-color-white;
	}
</style>
